<%@ page import="entity.New" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>查看新闻</title>
</head>
<!-- css -->
<link rel="stylesheet" href="bootStrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"    rel="stylesheet">
<!-- js -->
<script src="js/jquery-3.7.1.js"></script>
<script src="bootStrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<style>
    /*  datetimepicker 组件应该放在一个非静态定位的容器内 */
    .container {
        position: relative;
    }
    #selectAuthor {
        width: 90px;
    }
    #selectStartTime{
        width: 165px;
    }
    #selectEndTime {
        width: 165px;
    }
    #selectNews{
        font-size: 18px;
    }
    .news_table li a{
        font-size: 13px;
    }
</style>
<body>
<div id="content4" class="content-body">
    <!--标签页-->
    <div class="news_table">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">新闻列表</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">发布新闻</a></li>
        </ul>
        <br/>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <!--嵌套基础面板：处理用户列表面板-->
                <div class="panel panel-default">
                    <div class="panel-body text-center">
                        <!--内联表单-->
                        <form class="form-inline" action="./newList" method="post" id="selectNews">
                            <div class="container">
                                <div class="form-group">
                                    <label for="selectTitle">标题</label>
                                    <input type="text" class="form-control" id="selectTitle" name="selectTitle" placeholder="重工美食" value="${param.selectTitle }">
                                </div>
                                <div class="form-group">
                                    <label for="selectAuthor">作者</label>
                                    <input type="text" class="form-control" id="selectAuthor" name="selectAuthor" placeholder="Jane Doe" value="${param.selectAuthor }">
                                </div>
                                <div class="form-group">
                                    <label for="selectStartTime">开始时间</label>
                                    <input type="text" class="form-control datetimepicker" id="selectStartTime" name="selectStartTime" placeholder="请选择开始时间" value="${param.selectStartTime }">
                                </div>
                                <div class="form-group">
                                    <label for="selectEndTime">结束时间</label>
                                    <input type="text" class="form-control datetimepicker" id="selectEndTime" name="selectEndTime" placeholder="请选择结束时间" value="${param.selectEndTime }">
                                </div>
                                <button type="submit" class="btn btn-success">Send</button>
                                <button type="reset" class="btn btn-primary">Reset</button>
                            </div>
                        </form>
                    </div>
                    <!--栅格布局-->
                    <div class="row">
                        <div class="col-sm-10 col-sm-offset-1">
                            <!--表格-->
                            <table class="table table-hover table-bordered">
                                <thead class="thead-light">
                                <tr>
                                    <th style="width: 50px;">#</th>
                                    <th>标题</th>
                                    <th style="width: 68px;">封面</th>
                                    <th style="width: 100px;">作者</th>
                                    <th style="width: 200px;">发布时间</th>
                                    <th style="width: 150px;">操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:if test="${empty news }">
                                    <th colspan="6">暂无数据</th>
                                </c:if>
                                <c:if test="${!empty news }">
                                    <c:forEach var="New" items="${news }">
                                        <tr style="font-size: 18px">
                                            <td>${New.id}</td>
                                            <td><a href="./showNew?id=${New.id}">${New.title }</a></td>
                                            <td><img src="${New.cover }"></td>
                                            <td>${New.author }</td>
                                            <td>${New.putTime }</td>
                                            <td>
                                                <a href="./deleteNew?id=${New.id}&author=${New.author}" class="btn btn-danger btn-md">删除</a>
                                                <a href="./updateNew?id=${New.id}&author=${New.author}" class="btn btn-info btn-md">修改</a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    <tr>
                                        <th colspan="6">${page }</th>
                                    </tr>
                                </c:if>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <!--嵌套基础面板：处理用户列表面板-->
                <div class="panel panel-default">
                    <div class="panel-body">
                        <form method="post" action="./editor.do">
                            <div class="form-group">
                                <label for="inputTitle" class="col-sm-1 control-label">标题</label>
                                <div class="col-sm-11">
                                    <input type="text" class="form-control" id="inputTitle" name="inputTitle" placeholder="Title">
                                </div>
                            </div>
                            <br />
                            <br />
                            <div class="form-group">
                                <div class="page-container">
                                    <div class="page-right">
                                        <!-- 编辑器 DOM -->
                                        <div style="border: 1px solid #ccc;">
                                            <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
                                            <div id="editor-text-area" style="height: 500px"></div>
                                        </div>
                                    </div>
                                </div>
                                <input name="html" id=html type="text">
                            </div>
                            <button type="submit" name="btn_submit" id="btn_submit">提 交</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const E = window.wangEditor;
    var html;

    // 切换语言
    const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
    E.i18nChangeLanguage(LANG)

    window.editor = E.createEditor({
        selector: '#editor-text-area',
        html: '<p><br></p>',
        config: {
            placeholder: '',
            MENU_CONF: {
                uploadImage: {
                    fieldName: 'file',
                    server: "./upload2.do"
                }
            },
            onChange(editor) {
                html = editor.getHtml();
                document.getElementById("html").value = html;
            }
        }
    })

    window.toolbar = E.createToolbar({
        editor,
        selector: '#editor-toolbar',
        config: {}
    })
</script>
<script>
    $(document).ready(function() {
        $('#selectStartTime').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss'
        });

        $('#selectEndTime').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss'
        });
    });
    //错误提示
    window.onload = function() {
        checkError();
    }
    function checkError() {
        var errorMsg = "${errorMsg}";
        if (errorMsg) {
            alert(errorMsg);
            <% session.removeAttribute("errorMsg"); %>
        }
    }
</script>
</body>
</html>
